/**
 * Created by LinJe on 2015/10/10.
 */
(function( $ ) {

    var oGoodsFlow = $('.goods-flow'),
        oWaterFallWrap = $('#waterfallWrap'),
        oLoadMore = $('.js-loadmore'),
        aFirstColumn = [], aSecondColumn = [], //用来记录第一列和第二列的所有瀑布流的父节点（jq对象）
        pageStep = 1, totalSize = -1;

    aFirstColumn.positionLeft = 0; //第一列的左间距
    aFirstColumn.offsetTop = 25;
    aSecondColumn.positionLeft = 350; //第二列的左间距
    aSecondColumn.offsetTop = 25;

    //初始化默认加载
    init();

    //滚动到底部加载更多
    $.addScrollToBottom();
    $(window).on('scrollToBottom', function() {
        pageStep ++;
        insertWaterFall({'pageStep':pageStep}, function(res) {
            if ( res.scrollEnd ) {
                oLoadMore.removeClass('mtb300').addClass('mtb50').html('<span class="loading"><a>已经是最后一条内容</a></span>');
            } else {
                $.canloadInfo = true;
            }
        });
    });


    //初始化默认加载瀑布流
    function init() {
        oWaterFallWrap.html('');
        aFirstColumn.length = 0;
        aSecondColumn.length = 0;
        pageStep = 1;
        totalSize = -1;
        oLoadMore.show().removeClass('mtb50').addClass('mtb300').html('<span class="loading"><a><i class="i-05"></i>正在加载更多</a></span>');
        insertWaterFall({'pageStep':pageStep}, function( res ) {

            if ( res && res.scrollEnd && res.scrollEnd ) {
                //oLoadMore.hide();

                oLoadMore.removeClass('mtb300').addClass('mtb50').html('<span class="loading"><a>已经是最后一条内容</a></span>');
            }
        });
    }


    //获取第一列和第二列的高度
    function getColumnHeight() {
        var oFirstObj = aFirstColumn[aFirstColumn.length-1],
            oSecondObj = aSecondColumn[aSecondColumn.length-1],
            firstHeight = oFirstObj.height() + parseInt(oFirstObj.css('top')),
            secondHeight = oSecondObj.height() + parseInt(oSecondObj.css('top'));

        return { 'first':firstHeight, 'second':secondHeight }
    }

    //插入瀑布流数据
    function insertWaterFall( sets, callBack ) {
        if ( totalSize != -1 && totalSize < pageStep ) {
            callBack && callBack({'scrollEnd':true});
            return;
        }
        //默认获取四条数据
        waterFallServers.getWaterFallDatas({'pageStep':sets.pageStep, 'count':sets.count ? sets.count : 5}, function(msg) {
            if ( msg.error || msg.code != 200 ) {
                window.globalLayer.openWarning({'autoClose':true, time:2000, text:msg.description});
                return;
            }


            var totalData = msg.detail.hotBeans;

            if ( totalData ) {
                for ( var i = 0, iLen = totalData.length; i < iLen; i ++ ) {
                    var oDes;

                    oWaterFallWrap.append( getWaterFallHtml(totalData[i]) );
                    oDes = oWaterFallWrap.find('.gf-description').eq(-1);

                    if ( aFirstColumn.length == 0 ) {

                        aFirstColumn.push( oDes );
                        oDes.css({'left':aFirstColumn.positionLeft,'top':'110px'});

                    } else if ( aSecondColumn.length == 0 ) {

                        aSecondColumn.push( oDes );
                        oDes.css({'left':aSecondColumn.positionLeft+'px','top':'0'});

                    } else {

                        var columnHeights = getColumnHeight(),
                            firstHeight = columnHeights.first,
                            secondHeight = columnHeights.second;

                        if ( firstHeight < secondHeight ) {
                            //如果第一列的高度小于第二列的高度，那么当前插入的瀑布流将显示在第一列底部，反之亦然
                            aFirstColumn.push( oDes );
                            oDes.css({'left':aFirstColumn.positionLeft+'px', 'top':(firstHeight+aFirstColumn.offsetTop)+'px'});
                        } else {
                            aSecondColumn.push( oDes );
                            oDes.css({'left':aSecondColumn.positionLeft+'px', 'top':(secondHeight+aSecondColumn.offsetTop)+'px'});
                        }

                    }
                }

                //设置瀑布流最外层节点的高度
                var columnHeights = getColumnHeight(),
                    maxHeight = columnHeights.first - columnHeights.second > 0 ? columnHeights.first : columnHeights.second;
                oGoodsFlow.css('height', maxHeight+'px');

                totalSize = msg.detail.totalSize;
                callBack && callBack({'scrollEnd':totalSize<=1});
            }
        });
    }


    //获取单条瀑布流的html
    function getWaterFallHtml( data ) {
        return '<div class="gf-description" style="position:absolute;">\
                    <div class="item-box">\
                        <div class="content">\
                            <div class="hd">\
                                <div class="item-1"><div class="con"><span class="interact">'+ data.interactive +'</span>，<span class="pepole">'+ data.participate +'</span></div></div>\
                                <div class="item-2">\
                                    <div class="img"><div class="center"><img src="'+ data.prodPicUrl +'?imageMogr2/thumbnail/128x128" ></div></div>\
                                    <div class="con"><h2>'+ data.prodTitle +'</h2></div>\
                                </div>\
                            </div>\
                            <div class="bd">\
                                <div class="time"><span>'+ data.time +'</span></div>\
                                <div class="tnl"><a href="'+data.userUrl+'"><span class="user-name">'+ data.userName +'</span></a><span class="label">'+ data.typeDescription +'</span></div>\
                                '+(function() {
                                    return data.url ? '<div class="link"><a href="'+ data.url +'"  target="_blank" > '+ data.url +'</a></div>' : '';
                                })()+'\
                                <div class="text">\
                                    <p>'+ data.comment +'</p>\
                                </div>\
                                <div class="w-opt"><span class="comment"><a href="'+ data.prodUrl +'" target="_Blank">进入商品讨论页 ></a></span></div>\
                            </div>\
                        </div>\
                    </div>\
                    <div class="bottom"></div>\
                </div>';
    }

})( jQuery );